<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript"
	src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular-pagination.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>

	<div class="container" ng-app="myApp" ng-controller="userCtrl">

		<div class="tab-content">
			<div class="tab-pane fade in active" id="device">
				<div class="pull-right">
					<button class="btn btn-primary btn-mini" data-toggle="modal"
						data-target="#addModal">添加</button>
				</div>
				<!-- 表格内容-->
				<table class="table table-bordered table-striped ">
					<thead>
						<tr class="active">
							<th>用户id</th>
							<th>用户名</th>
							<th>年龄</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="user in users">
							<td>{{user.id}}</td>
							<td>{{user.userName}}</td>
							<td>{{user.age}}</td>
							<td>
								<button class="btn btn-mini btn-danger"
									ng-click="delete(user.id)">Remove</button>
								<button class="btn btn-primary btn-mini" data-toggle="modal"
									data-target="#myModal" ng-click="edit(user.id)">Edit</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>

		</div>
		<!-- 分页控件指令 ，可以是元素 或者 属性 -->
   		<my-pagination page-option="option"></my-pagination>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">Edit</h4>
					</div>
					<div class="modal-body">
						<form id="form1" class="form-horizontal" role="form"
							action="updateuser" method="post">
							<input type="hidden" name="id" value="{{user.id}}" />
							<div class="form-group">
								<label for="inputEmail" class="col-md-5 control-label">用户名</label>

								<div class="input-group col-md-3">
									<input type="text" class="form-control" id="inputEmail"
										ng-model="user.userName" value="{{user.userName}}" />
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword" class="col-md-5 control-label">密码</label>

								<div class="input-group col-md-3">
									<input type="text" class="form-control" id="inputPassword"
										ng-model="user.passWord" value="{{user.passWord}}" />

								</div>
							</div>
							<div class="form-group">
								<label for="inputAge" class="col-md-5 control-label">年龄</label>

								<div class="input-group col-md-3">
									<input type="text" class="form-control" id="inputAge"
										ng-model="user.age" value="{{user.age}}" />
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal"
							ng-click="close()">关闭</button>
						<button id="sub" type="button" class="btn btn-primary"
							data-dismiss="modal" ng-click="submit()">提交更改</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
		<!-- add模态框-->
		<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
			aria-labelledby="addModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="addModalLabel">Add</h4>
					</div>
					<form id="form2" class="form-horizontal" role="form">
						<div class="modal-body">

							<div class="form-group">
								<label for="addEmail" class="col-md-5 control-label">用户名</label>

								<div class="input-group col-md-3">
									<input type="text" class="form-control" id="addEmail"
										ng-model="user.userName" />
								</div>
							</div>
							<div class="form-group">
								<label for="addPassword" class="col-md-5 control-label">密码</label>

								<div class="input-group col-md-3">
									<input type="text" class="form-control" id="addPassword"
										ng-model="user.passWord" required="required" />

								</div>
							</div>
							<div class="form-group">
								<label for="addAge" class="col-md-5 control-label">年龄</label>

								<div class="input-group col-md-3">
									<input type="text" class="form-control" id="addAge"
										ng-model="user.age" />
								</div>
							</div>

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal" ng-click="close()">关闭</button>
							<button id="sub1" class="btn btn-primary" data-dismiss="modal"
								ng-click="create()">提交更改</button>
						</div>
					</form>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
	</div>
</body>
</html>